<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <!-- 商品组件 -->
  <div
    class="Mall4j list-con component-prod-item"
    :class="{ normalList: listType === 1 && route.path !== '/index' }"
  >
    <div
      v-for="(item,index) in paleList"
      :key="item.prodId"
      class="item"
      @click="toProdDetail(item.prodId)"
    >
      <div class="goods-img">
        <!-- 秒杀/热销商品图 -->
        <!-- 团购商品图 -->
        <img
          v-if="item.prodPic"
          :src="checkFileUrl(item.prodPic)"
          alt
        >
        <img
          v-if="item.imgs&&item.imgs.length"
          :src="checkFileUrl(item.imgs[0])"
          alt
          @error="(event)=>{handlePicError(event,index)}"
        >
        <img
          v-else-if="item.pic"
          :src="checkFileUrl(item.pic)"
          alt
        >
        <img
          v-else
          src="@/assets/img/def.png"
          alt
        >
      </div>
      <div class="goods-msg">
        <div class="goods-name">
          <span
            v-if="item.shopId === 1"
            class="activity-sign"
          >{{ $t('prodDetail.selfEmployed') }}</span>
          <span
            v-if="(item.prodType === 1 || item.prodType === 2) && item.activityInProgress"
            class="activity-sign"
          >
            {{ item.prodType === 2 ? $t('prodDetail.prodType3') : `${item.groupActivitySearchVO?.groupNumber + $t('index.join')}` }}
          </span>
          {{ item.prodName }}
        </div>
        <div class="goods-price">
          <!-- 秒杀商品价格 -->
          <div
            v-if="item.activityInProgress && item.prodType===2"
            class="price"
          >
            ￥
            <span class="big">{{ parsePrice(item.activityPrice)[0] }}</span>
            <span class="small">.{{ parsePrice(item.activityPrice)[1] }}</span>
          </div>
          <!-- 团购商品价格 -->
          <div
            v-else-if="item.activityInProgress && item.prodType===1"
            class="price"
          >
            ￥
            <span class="big">{{ parsePrice(item.activityPrice)[0] }}</span>
            <span class="small">.{{ parsePrice(item.activityPrice)[1] }}</span>
          </div>
          <!-- 热销商品价格 -->
          <div
            v-else
            class="price"
          >
            ￥
            <span class="big">{{ parsePrice(item.price)[0] }}</span>
            <span class="small">.{{ parsePrice(item.price)[1] }}</span>
            <span
              v-if="item.soldNum || item.soldNum === 0"
              class="small sold-number"
            >
              {{ $t('prodDetail.sold') }} {{ item.soldNum }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <!-- 商品列表为空 -->
    <empty-all-tips
      v-if="isLoaded && !paleList.length"
      :text="$t('sorryNoRelatedProducts')"
      :back="$t('lookAtOther')"
      is-click
      @handle-click="toList"
    />
    <!-- 商品列表为空 -->
  </div>
</template>

<script setup>
import defPng from '@/assets/img/def.png'
import { checkFileUrl } from '@/utils/index.js'

const props = defineProps({
  isLoaded: {
    type: Boolean,
    default: false
  },
  paleList: {
    type: Array, // 指定传入的类型
    default: () => []// 这样可以指定默认的值
  },
  listType: {
    type: Number,
    default: 0
  },
  // 1: 商品列表页
  pageType: {
    type: Number,
    default: 0
  }
})
const emit = defineEmits(['tapProd', 'updatePicIndext', 'handClick'])
const router = useRouter()
const route = useRoute()

const prodTypeArr = ref([])

onMounted(() => {
  prodTypeArr.value = [
    $t('prodDetail.prodType1'),
    $t('prodDetail.prodType2'),
    $t('prodDetail.prodType3'),
    $t('prodDetail.prodType4')
  ]
})

const parsePrice = (val) => {
  let num = Number(val)
  if (!num) {
    num = 0
  }
  // 截取小数点后两位，并以小数点为切割点将val转化为数组
  return num.toFixed(2).split('.')
}

/**
 * 跳转到商品详情页
 */
const toProdDetail = (prodId) => {
  emit('tapProd', prodId)
  const newPage = router.resolve({
    path: '/detail',
    query: {
      prodId
    }
  })
  window.open(newPage.href, '_blank', 'noopener,noreferrer')
}

/**
 * 图片访问失败时更为默认图片
 */
const handlePicError = (event, index) => {
  const current = props.paleList[index].currentActive
  const max = props.paleList[index].imgs.length - 1
  if (current < max) {
    emit('updatePicIndext', index, current + 1)
    nextTick(() => {
      event.target.src = props.paleList[index].imgs[current + 1]
    })
  } else {
    event.target.src = defPng
  }
}

const toList = () => {
  // 解决list页面点击无效问题
  if (route.path === '/list') {
    emit('handClick')
  } else {
    router.push({
      path: '/list',
      query: {
        st: 0
      }
    })
  }
}

</script>

<style lang="scss" scoped>
.component-prod-item {
  &:deep(.goods-list) {
    .list-con {
      .item {
        .goods-msg {
          .goods-name {
            height: 20px;
            line-height: 14px;
            font-size: 14px;
            max-width: 100%;
          }
        }
      }
    }
  }

  .sold-number {
    margin-left: 5px;
    color: #999;
  }

  &:deep(.group-number) {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 5px 12px;
    background: #e1251b;
    color: #fff;
    border-radius: 30px;
    line-height: 1;
  }

  .activity-sign {
    display: inline-block;
    padding: 1px 3px;
    border-radius: 2px;
    background: #e1251b;
    color: #fff;
    font-size: 12px;
    margin-left: 2px;
  }
}

/* 商品名字的样式修改 */
.normalList {
  min-height: 440px;
  .item {
    width: 275px;
    .goods-img {
      width: 275px;
      height: 275px;
      line-height: 275px;
    }
  }

  &:deep(.empty) {
    min-height: 380px;
  }
}
</style>
